<template>
	<div>
		<h2>列偏移 offset</h2>
		<el-row :gutter="20">
			<el-col :span="6" :md="10">
				<div class="grid-content bg-purple"></div>
			</el-col>
			<el-col :span="6" :offset="3">
				<div class="grid-content bg-purple"></div>
			</el-col>
			<!-- <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col> -->
		</el-row>
		<h2>对齐方式 flex</h2>
		<el-row type="flex" class="row-bg" justify="center">
			<el-col :span="6">
				<div class="grid-content bg-purple"></div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple-light"></div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple"></div>
			</el-col>
		</el-row>
		<h2>响应式配置</h2>
		<el-row :gutter="10">
			<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
				<div class="grid-content bg-purple">1</div>
			</el-col>
			<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
				<div class="grid-content bg-purple-light">2</div>
			</el-col>
			<el-col :xs="4" :sm="6" :md="12" :lg="9" :xl="11">
				<div class="grid-content bg-purple">3</div>
			</el-col>
			<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" :span="24" class="hidden-md-only">
				<div class="grid-content bg-purple-light">4</div>
			</el-col>
		</el-row>
		<pre>
			xs	<768px

			sm	≥768px

			md	≥992px

			lg	≥1200px

			xl	≥1920px
		</pre>
	
		


		<!-- 表单测试 -->
		<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
		  <el-form-item
		    v-for="(domain, index) in dynamicValidateForm.domains"
		    :label="'域名' + index"
		    :key="domain.key"
		    :prop="'domains.' + index + '.value'"
		    :rules="{
		      required: true, message: '域名不能为空', trigger: 'blur'
		    }"
		  >
		  	<el-col :span="2">
		  		<el-radio v-model="radio" :label="(index+1).toString()">域名 {{index}}</el-radio>
		  	</el-col>
		    <el-col :span="20">
		    	<el-input v-model="domain.value"></el-input>
		    </el-col>
		    <el-col :span="2">
		    	<el-button @click.prevent="removeDomain(domain)">删除</el-button>
		    </el-col>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
		    <el-button @click="addDomain">新增域名</el-button>
		    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
		  </el-form-item>
		</el-form>
		<!-- 表单测试 -->
	</div>
</template>
<script>
export default {
	name: 'respon',
	data() {
		return {
			radio:'1',
			dynamicValidateForm: {
	          domains: [{
	            value: ''
	          }],
	          email: ''
	        }
		}
	},
	methods:{
		submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
	}
}

</script>
<style>
.middle {
	height: 40px;
	line-height: 40px;
	text-align: left;
}

body {
	overflow-x: hidden;
}


/**{margin: 0;padding: 0;}*/

.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}

.el-col {
	border-radius: 4px;
}

.bg-purple-dark {
	background: #99a9bf;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	line-height: 36px;
}

.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}

</style>
